<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
        <title>物体坠落动画背景</title>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
            integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer" />

        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background-color: #111;
                font-size: 16px;
                /* 绘制网格背景 */
                background-image: linear-gradient(to right, #333 1px, transparent 1px),
                    linear-gradient(to bottom, #333 1px, transparent 1px);
                background-size: 5vh 5vh;
                user-select: none;
                overflow: hidden;
            }

            h1 {
                font-size: 6em;
                letter-spacing: 0.5em;
                color: #fff;
            }

            .item {
                position: absolute;
                top: 0;
                font-size: 24px;
                aspect-ratio: 1/1;
                color: #0f0;
                animation: falling 10s linear forwards;
                /* 从顶部开始生长 */
                transform-origin: top;
            }

            @keyframes falling {
                0% {
                    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
                }
                10% {
                    /* 变大完成，开始悬挂停留一会儿 */
                    transform: translateY(0vh) scale(1);
                }
                45% {
                    transform: translateY(0vh) scale(1);
                }
                55% {
                    /* 开始坠落 */
                    transform: translateY(calc(100vh - 100%)) scale(1);
                }
                90% {
                    /* 坠落完成，开始缩小 */
                    transform: translateY(calc(100vh - 100%)) scale(1);
                    /* 向底下缩小 */
                    transform-origin: bottom;
                }
                100% {
                    /* 缩小消失 */
                    transform: translateY(calc(100vh - 100%)) scale(0);
                    transform-origin: bottom;
                }
            }

            .hh {
                font-size: 5em;
                color: aqua;
                filter: hue-rotate(180deg);
            }
        </style>
    </head>
    <body>
        <h1>物体坠落动画背景</h1>
        <i class="hh fa fa-star"></i>

        <script>
            //图标数组
            const icons = [
                "fa fa-star",
                "fa fa-coffee",
                "fa fa-bicycle",
                "fa fa-rocket",
                "fa fa-gamepad",
                "fa fa-music",
                "fa fa-film",
                "fa fa-book",
                "fa fa-tree",
                "fa fa-space-shuttle",
                "fa fa-paw",
                "fa fa-umbrella",
                "fa fa-snowflake-o",
                "fa fa-birthday-cake",
                "fa fa-gift"
            ];

            function createIconElement() {
                const item = document.createElement("div");
                const icon = document.createElement("i");
                icon.setAttribute("class", icons[Math.floor(Math.random() * icons.length)]);
                item.classList.add("item");
                item.appendChild(icon);
                document.body.appendChild(item);

                const randomFontSize = Math.floor(Math.random() * 40) + 20;
                const randomX = Math.floor(Math.random() * window.innerWidth);
                const randomHue = Math.floor(Math.random() * 360); // 旋转色相环实现随机色相

                item.style.fontSize = randomFontSize + "px";
                item.style.left = randomX + "px";
                // item.style.color = "hsl(" + randomHue + ", 100%, 50%)";
                item.style.filter = `hue-rotate(${randomHue}deg)`;

                // 移除元素
                setTimeout(() => {
                    item.remove();
                }, 10000);
            }

            // 1s 生成一个图标
            setInterval(() => createIconElement(), 1000);
        </script>
    </body>
</html>
